<template>
  <div class="">
    <x-header class="header" :left-options="{backText: ''}">固网终端</x-header>
    <div class="content">
      <ul v-if="items.length">

        <li v-for="(x,i) of items" :key="i"   class="ub pad my-item" @click="handleItems(x)">
          <div class="circle-index ub uc">{{i+1}}</div>
          <div class="title uf-1 ub-v">
            <div>{{x.imei}}</div>
            <div class="sub-title">{{x.comdity_name}}</div>
            <div class="sub-title">{{x.first_storage_date}}</div>
          </div>
          <!-- <div class="value ub uc">{{x.first_storage_date}}</div> -->
          <div class="ub uc t-gray" @click="handleItems">
            <i class="fa fa-chevron-right"></i>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { XHeader } from "vux";
export default {
  data() {
    return {
      code: this.$route.params["code"] || 2,
      goods_type: this.$route.params["goods_type"] || 2,
      type: this.$route.params["type"] || 2,
      items: []
    };
  },
  mounted() {
    this.$vux.loading.show({
      text: "loading"
    });
    this.$store
      .dispatch("terminal_index_orgs_detail", {
        code: this.code,
        goods_type: this.goods_type,
        type: this.type
      })
      .then(resp => {
        this.$vux.loading.hide();
        this.items = resp.data;
      });
  },
  methods: {
    handleItems(x) {
      this.$router.push({name:"TerminalSearch",params:{imei:x.imei,comdity_name:x.comdity_name}})
    }
  },
  components: {
    XHeader
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
li {
  .title {
    padding-left: 20px;
  }
  .sub-title {
    font-size: 0.95em;
  }
  i {
    margin-left: 10px;
  }
  .value{
    margin-left:0.2em;
    max-width:3.5em;
  }
}
</style>